<template>
	<view class="tabbarpage-container">
		<!--胶囊上方-->
		<view :style="{ 'padding-top': statusBarHeight }"></view>
		<!--胶囊-->
		<view class="page-header" :style="{ 'height': capsuleHeight }">
			学情智能分析
		</view>
		<!--主体-->
		<view class="tabbarpage-body scrollable">
			<view class="growpage-container">
				<!-- <RadarChartCom :question-type-correct-rate="jsonObj.questionTypeCorrectRate" v-if="jsonObj.questionTypeCorrectRate"/> -->
				<RadarChartCom ref="radarQuesTypeRef" />
				<view style="height:20px">
					<!-- manual padding -->
				</view>
				<!-- <RadarChartEvalCom :ability-dimension="jsonObj.abilityDimension" v-if="jsonObj.abilityDimension"/> -->
				<RadarChartEvalCom ref="radarDimensionRef" />
				<view style="height:20px">
					<!-- manual padding -->
				</view>
				<!-- <LineChartCom :overall-performance-with-time="jsonObj.overallPerformanceWithTime" v-if="jsonObj.overallPerformanceWithTime"/> -->
				<LineChartCom ref="lineRef" />
				<!-- <CardCom title="学习建议">
					<view style="white-space:pre-line;">{{ personalSuggestion }}</view>
				</CardCom> -->
			</view>
		</view>
		<!--底部tabbar占据高度72px-->
		<!--Tabbar-->
		<TabbarCom :tabbarIndex="3" class="tabbarpage-tabbar" />
	</view>
</template>

<script setup>
import TabbarCom from '@/components/TabbarCom.vue'
import { onBeforeMount, ref, onMounted, watch } from 'vue';
import { globalProps } from '@/js/global.js'
import RadarChartCom from '@/pages/GrowPage/components/RadarChartCom.vue';
import LineChartCom from './components/LineChartCom.vue';
import CardCom from '@/components/CardCom.vue';
import RadarChartEvalCom from '@/pages/GrowPage/components/RadarChartEvalCom.vue';

const statusBarHeight = ref(globalProps.statusBarHeight)
const capsuleHeight = ref(globalProps.capsuleHeight)
onBeforeMount(() => {
	uni.hideTabBar({
		animation: false
	})
})

onMounted(() => {
	getGrowData()
})

const radarQuesTypeRef = ref(null)
const radarDimensionRef = ref(null)
const lineRef = ref(null)

const getGrowData = () => {
	uni.request({
		url: globalProps.baseApi + 'levelRecord/detail',
		method: 'GET',
		data: {
			stuID: globalProps.userInfo.id
		},
		success: function (res) {
			console.log('请求成功', res.data);
			backendData.value = res.data
			jsonObj.value = JSON.parse(JSON.stringify(frontendFormat(backendData.value)));
			if (radarQuesTypeRef.value) {
				radarQuesTypeRef.value.showData(jsonObj.value.questionTypeCorrectRate)
			} else {
				console.log('雷达图题型组件未加载')
			}
			if (radarDimensionRef.value) {
				radarDimensionRef.value.showData(jsonObj.value.abilityDimension)
			} else {
				console.log('雷达图能力维度组件未加载')
			}
			if (lineRef.value) {
				lineRef.value.showData(jsonObj.value.overallPerformanceWithTime)
			} else {
				console.log('折线图组件未加载')
			}
		},
		fail: function (err) {
			console.log('请求失败', err);
			uni.showToast({
				title: '获取学情分析失败',
				icon: 'error'
			})
		}
	});
}

const backendData = ref({});

const frontendFormat = (backendData) => {
	console.log('转格式时打印后端数据: ', backendData);

	return {
		"overallPerformanceWithTime": {
			"lineData": backendData.overLevels,
			"suggestions": backendData.suggestions
		},
		"abilityDimension": {
			"abilityDimensionData": [
				backendData.lanCompreScore,
				backendData.lanExpreScore,
				backendData.lanKnowledgeScore
			],
			"abilityDimensionDetail": [
				backendData.lanCompreComment,
				backendData.lanExpreComment,
				backendData.lanKnowledgeComment
			]
		},
		"questionTypeCorrectRate": {
			"correctRateData": backendData.correctRate,
			"correctRateDetail": [
				{
					"question_type": "Choice Questions",
					"performance": backendData.choicePerformance,
					"suggestions": backendData.choiceSuggestion
				},
				{
					"question_type": "Reading Comprehension",
					"performance": backendData.readingPerformance,
					"suggestions": backendData.readingSuggestion
				},
				{
					"question_type": "Translation",
					"performance": backendData.translationPerformance,
					"suggestions": backendData.translationSuggestion
				},
				{
					"question_type": "Essay",
					"performance": backendData.essayPerformance,
					"suggestions": backendData.essaySuggestion
				}
			]
		}
	}
};

// const jsonObj = JSON.parse(jsonGet.value)
const jsonObj = ref({})

</script>

<script>
export default {
	onPullDownRefresh() {
		console.log('refresh');
		getGrowData()
		uni.stopPullDownRefresh();
	}
}
</script>

<style>
@import "@/css/global.css";
@import "@/css/animation.css";

page {
	color: white;
}

.growpage-container {
	margin-top: 15px;
	padding: 0 20px;
	overflow-y: scroll;
}
</style>
